import 'package:flutter/material.dart';

//https://blog.csdn.net/u013290250/article/details/130493746
class TextFieldViewPage extends StatefulWidget {
  const TextFieldViewPage({super.key});

  @override
  State<TextFieldViewPage> createState() => _TextFieldViewPageState();
}

class _TextFieldViewPageState extends State<TextFieldViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextField'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(10),
            child: ListView(
              children: const [
                TextField(),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  decoration: InputDecoration(hintText: '用户名'),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  decoration: InputDecoration(
                      hintText: '用户名', border: OutlineInputBorder()),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  obscureText: true, //是否密类型
                  cursorColor: Colors.black,
                  decoration: InputDecoration(
                    hintText: '密码',
                    border: OutlineInputBorder(),
                    suffixIcon: Icon(Icons.visibility), //内部右侧图标
                    enabledBorder: OutlineInputBorder(
                      //得到焦点颜色
                      borderSide: BorderSide(color: Colors.black),
                    ),
                    focusedBorder: OutlineInputBorder(
                      //失去焦点颜色
                      borderSide: BorderSide(color: Colors.grey),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  obscureText: false, //是否密类型
                  cursorColor: Colors.black,
                  decoration: InputDecoration(
                    hintText: '搜索', //hint 显示
                    border: OutlineInputBorder(
                        borderSide: BorderSide(width: 5, color: Colors.yellow)),
                    suffixIcon: Icon(Icons.close), //内部右侧图标
                    enabledBorder: OutlineInputBorder(
                      //得到焦点颜色
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      //失去焦点颜色
                      borderSide: BorderSide(color: Colors.grey),
                    ),
                  ),
                ),
                TextField(
                  obscureText: false, //是否密类型
                  cursorColor: Colors.black,
                  decoration: InputDecoration(
                    icon: Icon(Icons.add), //右边一个icon
                    prefixIcon: Icon(Icons.lock),
                    prefixText: 'http://', //输入内容 预先写好，且不可删除
                    border: OutlineInputBorder(),
                    enabledBorder: OutlineInputBorder(
                      //得到焦点颜色
                      borderSide: BorderSide(
                        color: Colors.black,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      //失去焦点颜色
                      borderSide: BorderSide(color: Colors.grey),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                    decoration: InputDecoration(
                        hintText: 'hello',
                        hintStyle: TextStyle(
                            fontSize: 14, color: const Color(0xFF9E9E9E)),
                        suffixIcon: const Icon(
                          Icons.visibility_off_sharp,
                          color: Colors.grey,
                        ),
                        contentPadding: EdgeInsets.only(top: 12, left: 24),
                        border: InputBorder.none))
              ],
            ),
          ),
        ));
  }
}
